<!--<template>
  <div id="app">
    <router-view/>
  </div>
</template>-->


<template>
  <div id="app">
    <el-container style="height: 500px; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="['1', '6']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-menu"></i>管理员管理</template>
            <el-menu-item-group>
              <!--            <template slot="title">分组一</template>-->
              <el-menu-item index="1-1"><router-link to='/admin/list'>管理员列表</router-link></el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <!--          <el-menu-item-group title="分组2">
                        <el-menu-item index="1-3">选项3</el-menu-item>
                      </el-menu-item-group>-->
            <!--          <el-submenu index="1-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="1-4-1">选项4-1</el-menu-item>
                      </el-submenu>-->
          </el-submenu>

          <el-submenu index="2">
            <template slot="title"><i class="el-icon-menu"></i>用户管理</template>
            <el-menu-item-group>

              <el-menu-item index="2-1" ><router-link to='/user/list'>用户列表</router-link></el-menu-item>
              <el-menu-item index="2-2">权限设置</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="2-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="2-4">
              <template slot="title">选项4</template>
              <el-menu-item index="2-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title"><i class="el-icon-menu"></i>页面管理</template>
            <el-menu-item-group>
              <el-menu-item index="3-1"><router-link to='/page/hotword'>热词管理</router-link></el-menu-item>
              <el-menu-item index="3-2"><router-link to='/page/new'>新闻快报管理</router-link></el-menu-item>
            </el-menu-item-group>

            <el-menu-item index="3-3"><router-link to='/lunbo/photo'>轮播图管理</router-link></el-menu-item>

            <el-submenu index="3-4">
              <template slot="title">选项4</template>
              <el-menu-item index="3-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>

          <el-submenu index="4">
            <template slot="title"><i class="el-icon-menu"></i>商品管理</template>
            <el-menu-item-group>
              <el-menu-item index="3-1"><router-link to='/goods/list'>商品类管理</router-link></el-menu-item>
              <el-menu-item index="3-2"><router-link to='/commodity/list'>商品管理</router-link></el-menu-item>
            </el-menu-item-group>

              <el-menu-item index="3-3"><router-link to='/commodity/add'>商品增加</router-link></el-menu-item>

            <el-submenu index="3-4">
              <template slot="title">选项4</template>
              <el-menu-item index="3-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>

          <el-submenu index="5">
            <template slot="title"><i class="el-icon-menu"></i>订单管理</template>
            <el-menu-item-group>

              <el-menu-item index="2-1" ><router-link to='/order/list'>全部订单</router-link></el-menu-item>
              <el-menu-item index="2-2"><router-link to='/order/unSend'>待发货订单</router-link></el-menu-item>
              <el-menu-item index="2-3"><router-link to='/order/sending'>已发货订单</router-link></el-menu-item>
              <el-menu-item index="2-4"><router-link to='/order/success'>已完成订单</router-link></el-menu-item>
            </el-menu-item-group>

          </el-submenu>

          <el-submenu index="6">
            <template slot="title"><i class="el-icon-menu"></i>查询统计</template>
            <el-menu-item-group>

              <el-menu-item index="2-1" ><router-link to=''>c</router-link></el-menu-item>
              <el-menu-item index="2-2"><router-link to="">v</router-link></el-menu-item>
              <el-menu-item index="2-3"><router-link to="">v</router-link></el-menu-item>
              <el-menu-item index="2-4">v</el-menu-item>
            </el-menu-item-group>

            <el-submenu index="2-4">
              <template slot="title">选项4</template>
              <el-menu-item index="2-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item><router-link to='/admin/self'>个人</router-link></el-dropdown-item>
              <el-dropdown-item>新增</el-dropdown-item>
              <el-dropdown-item>设置</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>{{admin.a_username}}</span>
        </el-header>

        <el-main>
          <router-view v-if="isRouterAlive"></router-view>

        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'App',
  provide(){
    return{
      reload:this.reload
    }
  },
  data(){
    return{
      admin:{},
      isRouterAlive:true
    }
  },
  methods:{
    reload(){
      this.isRouterAlive = false
      this.$nextTick(()=>{
        this.isRouterAlive= true
      })

    }
  },
  updated(){
    this.admin = this.$store.state.admin;
  },
  created() {

    // 在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem('store')) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(sessionStorage.getItem('store'))
        )
      )
    }

    // 在页面刷新时将vuex里的信息保存到sessionStorage里
    // beforeunload事件在页面刷新时先触发
    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem('store', JSON.stringify(this.$store.state))
    })
  }
}
</script>

<style>
  *{
    padding: 0;
    margin: 0;
    background-repeat: no-repeat;
    text-decoration: none;
    list-style: none;
  }
#app {

  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>
